<template>
    <div class="job_detail">
    	<div class="banner">
			<div class="swiper-container" id="swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="(item,index) in banner">
						<img  class="banner" :src="item"/>
					</div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<div class="title clearfix">
			<div class="left">
				<div class="head clearfix"><h2>资深电工</h2><span>室内装修设计</span></div>
				<div class="foot clearfix"><span>责任险</span><span>诚信险</span></div>
				<div class="price">150<em>&nbsp;元/天</em></div>
			</div>
			<div class="right">
				<div class="clearfix"><img src="../assets/images/a.jpg" alt=""></div>
				<div>诚信档案：<span>36.5</span></div>
			</div>
		</div>
		<div class="info">
			<div class="clearfix">
				<span>干活时间</span>
				<div>7月1日 9：00-18：00（工作日）</div>
			</div>
			<div class="address clearfix">
				<span>干活地址</span>
				<div class="addressText"><i class="iconfont icon-dingwei"></i><i>北京市丰北京市丰台区东营里5号台区东营里5号</i></div>
			</div>
			<div class="clearfix">
				<span>雇佣人数</span>
				<div>28/40人</div>
			</div>
		</div>
		<div class="detail">
			<h2>详情描述</h2>
			<p class="describe">1.预约维修后家急哥师傅会在1小时内联系客户，与客户就需要维修、安装的物品情况进行电话沟通，以确定是否需要携带零配件，上门服务时间等相关消息。</p>
			<p>2.家急哥师傅上门携带专业的工具，按照指定地点进行检测、维修、安装。</p>
			<p>3.家急哥师傅在维修安装完毕后打扫清洁现场卫生。</p>
			<p>4.以上服务价格仅为维修技能人工费，不包含材料配件费。材料配件用户可以自备，也可以选择由家急哥师傅按市场价自行协商进行代购。</p>
			<p>5.如因特殊原因需增加费用时，如现场增加服务项目等，最终报价由家急哥师傅和用户双方协商确定。</p>
			<p>6.此费用不包含高空费.(三楼收取30元.三楼以上每层加10元,最高（200元.)</p>
			<p>7.注：高空作业费建议在订单详情中通过补差价功能支付，避免线下支付引发不必要的纠纷。</p>
			<p>8.师傅上门检测出问题如因维修高客户选择不修要收取上门费39元.如果拆机检测了的这种情况另外再加收39拆机检测费用。</p>
			<p>注：具体上门时间由师傅和客户约定为准</p>
		</div>
		<div class="footer">
			<div class="fenxiang"><i class="iconfont icon-share"></i></div>
			<div @click="loging">立即接单</div>
		</div>
      <logingShade v-show="login"></logingShade>
    </div>
</template>

<script>
export default {
    name: 'job_detail',
     data(){
    	return{
        login:false,
    		mySwiper:"",
    		banner:["./static/images/detailban1.png","./static/images/1.jpg","./static/images/detailban2.png"]
    	}
    },
    mounted(){
    	this.mySwiper = new Swiper('.swiper-container', {
							loop: true,
							pagination: '.swiper-pagination',  // 分页器
							// autoplay: 2000,
							paginationClickable: true
						});
    },
    methods:{
       loging(){
           this.login = true;
       }
    }
}
</script>

<style scoped>
.job_detail{
	background-color: #F7F7F7;
	padding-bottom: 60px;
}
.banner{
	height: 200px;
}
.title{
	background-color: #fff;
	padding: 16px;
  position:relative;
}
.title>div{
	width: 70%;
	float: left;
}
.title>div:nth-child(2){
	width: 30%;
  position: absolute;
  top:50%;
  right:1rem;
  margin-top:-33px;
}
.head,.center{
	height: 20px;
	line-height: 20px;
	margin-bottom: 10px;
}
.head h2{
	font-size: 16px;
	font-weight: normal;
	float: left;
}
.head span{
	font-size: 14px;
	color: #999;
	float: left;
	margin-left: 10px;
}
.foot span{
	font-size: 12px;
	color: #fff;
	padding: 2px 6px;
	border-radius: 5em;
	background-color: #FFA100;
	float: left;
	margin-right: 12px;
}
.foot span:nth-child(2){
	background-color: #5BBBFF;
}
.price{
	font-size: 16px;
	color: #E91717;
	margin-top: 10px;
}
.price em{
	font-size: 12px;
	font-style: normal;
}
.right img{
	width: 50px;
	height: 50px;
	border-radius: 100%;
	float: right;
	margin-right: 16px;
}
.right div{
	font-size: 12px;
	color: #999;
	text-align: right;
	/*margin-top: 6px;*/
}
.right div span{
	color: #FFA100;
}
.info{
	background-color: #fff;
	padding: 0 16px;
	margin-top: .6rem;
}
.info>div{
	line-height: 50px;
	font-size: 14px;
	border-bottom: 1px solid #F1F1F1;
}
.info>div:nth-last-child(1){
	border:0;
}
.info>div span{
	float: left;
  width:26%;
}
.info>div div{
	font-size: 14px;
	color: #999;
}
.address{
	position: relative;
  min-height: 50px;
}
.info>div.address span{position:absolute;top:50%;width:25%;left:0;margin-top: -25px;float: none;}
.address i{
	color: #FFA100;
}
.addressText{line-height: 20px;width:70%;padding:1rem 1rem 5% 31%;}
.addressText i.icon-dingwei{position:absolute;top:1rem;left:25.5%;line-height: 20px;height:20px;}
.address img{
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top:50%;
	margin-top: -10px;
}
.detail{
	background-color: #fff;
	margin-top: .6rem;
	padding: 16px;
}
.detail h2{
	height: 40px;
	line-height: 40px;
	font-weight: normal;
	font-size: 14px;
}
.detail p{
	line-height: 20px;
	letter-spacing: 0.5px;
	font-size: 14px;
	color: #999;
	margin-bottom: 30px;
}
.footer{
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 16px;
	color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
}
.footer div{
	width: 70%;
	float: left;
	background-color: #FFA100;
}
.footer .fenxiang{
	width: 30%;
	height: 49px;
	background-color: #fff;
	border-top: 1px solid #F1F1F1;
}
.footer .fenxiang i{
  font-size: 2rem;
  color:#999;
}
</style>
